<Html>
  <head>
    <title>render.js</title>
  </head>
  <body>
    <script>
      /*
          render.js

                render.js 是一个运行在视图层的js。它比WXS更加强大。它只支持 app-vue 和 web。

                render.js 的主要作用有2个：

                    1、大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力

                    2、在视图层操作dom,运行 for web 的 js 库


                平台差异说明  

                     App          H5       微信小程序          支付宝小程序    百度小程序    抖音小程序

                     支持(2.5.5+, 支持      不支持              不支持         不支持        不支持
                     仅支持vue)


                     ①、nvue的视图层是原生的，无法运行js。 但提供了bindingX技术来解决通信阻塞。
                           详见：  https://zh.uniapp.dcloud.io/tutorial/nvue-api.html#bindingx

                     ②、微信小程序下替代方案是wxs，这是微信为你提供的一个裁剪版 render.js 
                           详见： https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject.html#wxs

                     ③、web下不存在逻辑层和视图层的通信阻塞，也可以直接操作dom，所以在web端使用renderjs主要是为了跨端复用代码。

                           如果只开发web端，没有必要使用render.js
                           
      */  

      /*
            一、使用方法

                    设置script 节点的lang 为 renderjs

                    eg:
                         < script module="test" lang="renderjs">
                              export default{
                                  mounted(){
                                      // ...
                                  },
                                  methods:{
                                      // ...
                                  }                              
                              }
                         <//script>
      */

      /*
            二、示例

                    通过renderjs,在app和 H5 端使用完整的 echarts：


                      https://ext.dcloud.net.cn/plugin?id=1207
      */


      /*
            三、功能详解

                  1、大幅降低逻辑层和视图层的通讯损耗，提供高性能驶入交互能力

                            uni-app 的 app 端逻辑层和视图层是分开的，这种机制有很多好处，但是也有一个副作用是造成了两层

                      之间的通信阻塞。尤其是App的Android端阻塞问题影响了高性能应用的制作。

                            renderjs运行在视图层，可以直接操作视图层的元素，避免通信折损。

                        在 hello uni-app 的 canvas示例中，App端使用了 renderjs， 由运行在视图层的 renderjs 直接操作视图层的canvas,

                        实现了远超微信小程序的流畅度canvas 动画示例。

                            具体在 hello uni-app 示例中体验(https://m3w.cn/uniapp)


                  2、在视图层操作dom，运行 for web 的 js库

                        官方不建议再uni-app 里操作dom，但如果你不开发小策划给你续，想使用一些操作了dom、window的库，

                      其实可以使用 renderjs来解决。


                  在app-vue环境下，视图层由webview渲染，而 renderjs运行在视图层，自然可以操dom、window 。

                  这是一个基于 renderjs 运行 echar 完整版的示例： https://ext.dcloud.net.cn/plugin?id=1207
      */

      /*
            四、注意事项


                      目前支持内联使用。

                      不要直接应用大型类库，推荐通过动态创建 script 方式引用。

                      可以使用 vue组件的生命周期(不支持 beforeDestory、destroyed、beforeUnmount、unmounted),

                      不可以使用 App、Page的生命周期


                      视图层与逻辑层的通讯方式与 WXS一致，另外可以通过 this.$ownerInstance获取当前组件的ComponentDescriptor实例。

                      this.$ownerInstance.callMethod() 仅支持调用逻辑层vue选项式中的methods中定义的方法。

                      注意逻辑层给数据时最好一次性给到渲染层，而不是不停从逻辑层向渲染层发消息，那样还是会产生逻辑层和视图层的多次通信，还是会卡。


                      APP端视图层的页面应用资源的路径相对于根目录计算，例如： ./static/test.js

                      APP 端可以使用 dom、bom API ，不可直接访问逻辑层数据，不可以使用 uni相关接口

                      H5 端逻辑层和视图层实际运行在同一个环境中，相当于使用mixin方式，可以直接访问逻辑层数据。

                      vue3项目不支持 setup script 用法。
      */

            
    </script>
  </body>
</Html>